<template>
  <div id="listStyle">
    <el-radio-group v-model="type" size="mini" @change="changes">
      <el-radio-button :label="1"><i class="icon_card"></i>卡片</el-radio-button>
      <el-radio-button :label="2"><i class="icon_list"></i>列表</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    name: "listStyle",
    props: ['listType'],
    data() {
      return {
        type: this.listType
      }
    },
    methods: {
      changes(val) {
        this.$emit('listTypeChange', val);
      }
    }
  }
</script>

<style scoped>
  #listStyle {
    text-align: right;
    line-height: 40px;
  }

  .icon_card {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("./img/card.png") 0 0 no-repeat;
    -webkit-background-size: 12px 12px;
    background-size: 12px 12px;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 5px;
  }

  .is-active .icon_card {
    background: url("./img/card-active.png") 0 0 no-repeat;
    -webkit-background-size: 12px 12px;
    background-size: 12px 12px;
  }

  .icon_list {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("./img/list.png") 0 0 no-repeat;
    -webkit-background-size: 12px 12px;
    background-size: 12px 12px;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 5px;
  }

  .is-active .icon_list {
    background: url("./img/list-active.png") 0 0 no-repeat;
    -webkit-background-size: 12px 12px;
    background-size: 12px 12px;
  }
</style>
